<template>
  <div>
    <!--头部-->
    <HomeHeader></HomeHeader>
    <!--轮播图-->
    <cube-slide ref="slide" :data="bannerList" class="banner">
      <cube-slide-item v-for="(item, index) in bannerList" :key="index">
        <a :href="item.url">
          <img :src="item.image" />
        </a>
      </cube-slide-item>
      <!--自定义焦点-->
      <template slot="dots" slot-scope="props">
        <span
          class="my-dot"
          :class="{active: props.current === index}"
          v-for="(item, index) in props.dots"
          :key="index+'-dot'"
        >{{index + 1}}</span>
      </template>
    </cube-slide>
    <!--内容区域-->
    <div class="content">
      <h2 class="my-course">
        <i class="iconfont icon-shu"></i> 课程列表
      </h2>
      <div class="view-wrappe">
        <cube-recycle-list
          ref="recycleList"
          class="list lists"
          :size="size"
          :on-fetch="onFetch"
          :offset="offset"
        >
          <template slot="item" slot-scope="{ data }">
            <router-link :to="{name:'detail',params:{id:data._id}}">
              <img :src="data.banner" alt class="list-top" />
              <div class="list-bottom">
                <p class="course-title">{{data.name}}</p>
                <span>¥{{data.price}}元</span>
              </div>
            </router-link>
          </template>
          <div class="no-data" slot="noMore">没有更多数据了</div>
        </cube-recycle-list>
      </div>
    </div>
  </div>
</template>

<script>
import HomeHeader from "@/components/HomeHeader.vue";
import CourseList from "@/components/CourseList.vue";
import banner from "@/public/images/banner.png";
import { mapActions, mapState, mapGetters } from "vuex";
import * as types from "../store/types";
export default {
  components: {
    HomeHeader,
    CourseList
  },
  data() {
    return {
      types: "",
      size: 5,
      offset: 200,
      categoryChange: false
    };
  },
  methods: {
    onFetch(isfetch) {
      console.log("触发 发送请求");
      return this.$store
        .dispatch("course/" + types.GET_COURSE_LIST, {
          id: this.lastId,
          size: 5
        })
        .then(res => {
          if (this.categoryChange) {
            this.categoryChange = false;
            this.size = this.courseList.length;
            return this.courseList;
          } else {
            this.size = res.length?res.length:5;
            return res ;
          }
        });
      console.log("onfetch:", this.$refs.recycleList);
    }
  },
  created() {
    this.$store.dispatch("advertising/" + types.GET_BANNER);
    // this.$store.dispatch("course/" + types.GET_COURSE_LIST);
    this.$store.dispatch("course/" + types.GET_CATEGORY_LIST);
    this.$store.commit("course/" + types.EMPTY_COURSE_LIST);
  },
  computed: {
    ...mapState("advertising", ["bannerList"]),
    ...mapGetters("course", ["courseList"]),
    ...mapState("course", ["lastId", "categoryId"])
  },
  watch: {
    categoryId() {
      console.log("筛选过滤");
      this.$refs.recycleList.reset();
      this.categoryChange = true;
    }
  }
};
</script>

<style lang="stylus">
.banner
  img
    width 100%
.content
  margin 0 10px
.no-data
  width 100%
  text-align center
  font-size 15px
  color gray
// .lists
// li
// box-shadow 0 5px 6px rgba(178, 178, 178, 0.75)

// .list-bottom
// padding 10px 0
// text-align center
// line-height 25px
// color #777777
// span
// color red
.my-course
  line-height 35px
  color #4c4b4b
.cube-slide-dots .my-dot
  height 10px
  border-radius 50%
  margin 5px 5px
.view-wrappe
  height calc(100vh - 375px)
  overflow scroll
.lists
  a
    display flex
    margin-bottom 20px
    flex-direction row
    align-content flex-start
    align-items flex-start
  img
    height 80px
  .list-bottom
    display flex
    flex-direction column
    align-items flex-start
    align-content flex-start
    margin-left 20px
</style>